<template>
  <div class="register-wrap">
    <div class="nav-back">
      <span class="back-icon" @click="goBack">←</span>
    </div>

    <div class="title-block">
      <h1 class="brand-line">欢迎注册</h1>
      <h1 class="brand-name">安途代驾</h1>
    </div>

    <el-form class="register-form" @submit.prevent>
      <el-form-item>
        <el-input
          v-model="phone"
          placeholder="输入手机号"
          maxlength="20"
          clearable
        />
      </el-form-item>

      <el-form-item>
        <el-input
          v-model="password"
          :type="passwordVisible ? 'text' : 'password'"
          placeholder="输入密码（至少6位）"
          clearable
        >
          <template #suffix>
            <el-icon class="clickable" @click="passwordVisible = !passwordVisible">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18">
                <path fill="currentColor" d="M12 5C7 5 2.73 8.11 1 12c1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7Zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-8a3 3 0 1 0 .001 6.001A3 3 0 0 0 12 9Z"/>
              </svg>
            </el-icon>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-input
          v-model="confirmPassword"
          :type="confirmPasswordVisible ? 'text' : 'password'"
          placeholder="确认密码"
          clearable
        >
          <template #suffix>
            <el-icon class="clickable" @click="confirmPasswordVisible = !confirmPasswordVisible">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18">
                <path fill="currentColor" d="M12 5C7 5 2.73 8.11 1 12c1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7Zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-8a3 3 0 1 0 .001 6.001A3 3 0 0 0 12 9Z"/>
              </svg>
            </el-icon>
          </template>
        </el-input>
      </el-form-item>

      <el-button 
        class="primary-btn" 
        type="primary" 
        :disabled="registerDisabled"
        :loading="registerLoading"
        @click="handleRegister"
      >
        注册
      </el-button>
    </el-form>

    <div class="footer-row">
      <span>已有账户？</span>
      <a class="primary-link" @click="goToLogin">登录</a>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const router = useRouter()

const registerLoading = ref(false)
const phone = ref('')
const password = ref('')
const confirmPassword = ref('')
const passwordVisible = ref(false)
const confirmPasswordVisible = ref(false)

const registerDisabled = computed(() => {
  return !(phone.value && password.value && confirmPassword.value)
})

const goBack = () => {
  router.back()
}

const goToLogin = () => {
  router.push('/login')
}

const handleRegister = async () => {
  // 验证表单
  if (!phone.value || !password.value || !confirmPassword.value) {
    ElMessage.warning('请填写完整信息')
    return
  }

  // 验证账号长度
  if (phone.value.length < 6 || phone.value.length > 20) {
    ElMessage.warning('账号长度应在6-20位之间')
    return
  }

  // 验证密码长度
  if (password.value.length < 6) {
    ElMessage.warning('密码长度至少6位')
    return
  }

  // 验证两次密码是否一致
  if (password.value !== confirmPassword.value) {
    ElMessage.warning('两次输入的密码不一致')
    return
  }

  try {
    registerLoading.value = true
    
    const response = await axios.post('http://127.0.0.1:8888/users/register', {
      account: phone.value,
      password: password.value
    })

    if (response.data.code === 200) {
      // 注册成功
      ElMessage.success('注册成功，即将跳转到登录页面')
      // 延迟跳转，让用户看到成功提示
      setTimeout(() => {
        router.push('/login')
      }, 1500)
    } else {
      ElMessage.error(response.data.message || '注册失败')
    }
  } catch (error) {
    // 处理错误响应
    if (error.response && error.response.data) {
      const errorDetail = error.response.data.detail
      if (typeof errorDetail === 'object' && errorDetail.message) {
        ElMessage.error(errorDetail.message)
      } else if (typeof errorDetail === 'string') {
        ElMessage.error(errorDetail)
      } else {
        ElMessage.error('注册失败，请稍后重试')
      }
    } else {
      ElMessage.error('网络错误，请检查连接')
    }
    console.error('注册失败:', error)
  } finally {
    registerLoading.value = false
  }
}
</script>

<style scoped>
.register-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 16px 20px 28px;
  background: #fff;
}
.nav-back { height: 28px; display: flex; align-items: center; }
.back-icon { font-size: 18px; color: #2c2c2c; cursor: pointer; }

.title-block { margin: 8px 0 18px; }
.brand-line { margin: 0; font-size: 26px; color: #111; }
.brand-name { margin: 6px 0 0; font-size: 26px; color: #111; font-weight: 700; }

.register-form { margin-top: 8px; }
.register-form :deep(.el-input__wrapper) { padding: 10px 12px; }

.primary-btn { width: 100%; height: 44px; font-size: 16px; margin-top: 10px; }

.footer-row { text-align: center; color: #909399; margin-top: 24px; }
.primary-link { color: #409EFF; margin-left: 6px; cursor: pointer; }

.clickable { cursor: pointer; }
</style>

